<template>
  <el-dialog width="900px" :title="data.name+' 字段'" :visible.sync="is_visible" @close="on_close">
    <el-form size="small" label-width="60px" style="margin-right: 30px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="表名:" :error="String(errors.name?errors.name:'')">
            <el-input v-model="form_data.name" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="别名:" :error="String(errors.alias?errors.alias:'')">
            <el-input v-model="form_data.alias" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="描述:" :error="String(errors.readme?errors.readme:'')">
        <el-input v-model="form_data.readme" type="textarea" disabled></el-input>
      </el-form-item>
    </el-form>
    <el-form v-for="(item, index) in form_data.fields" :key="index" size="small" :inline="true" label-width="60px">
      <el-form-item label="字段:" style="margin-right: 0px"></el-form-item>
      <el-form-item style="width: 100px" :error="String(errors.fields&&errors.fields[index].name?errors.fields[index].name:'')">
        <el-input
          v-model="item.name"
          placeholder="字段名"
          :disabled="!('is_submited' in item) || item.is_submited">
        </el-input>
      </el-form-item>
      <el-form-item style="width: 100px" :error="String(errors.fields&&errors.fields[index]['alias']?errors.fields[index]['alias']:'')">
        <el-input
          v-model="item.alias"
          placeholder="别名"
          :disabled="!('is_submited' in item) || item.is_submited">
        </el-input>
      </el-form-item>
      <el-form-item style="width: 100px" :error="String(errors.fields&&errors.fields[index].type?errors.fields[index]['type']:'')">
        <el-select
          v-model="item.type"
          placeholder="选择字段类型"
          :disabled="!('is_submited' in item) || item.is_submited"
        >
          <el-option label="字符串" :value="0"></el-option>
          <el-option label="整数" :value="1"></el-option>
          <el-option label="浮点数" :value="2"></el-option>
          <el-option label="日期时间" :value="3"></el-option>
          <el-option label="日期" :value="4"></el-option>
          <el-option label="布尔" :value="5"></el-option>
          <el-option label="IP地址" :value="6"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :error="String(errors.fields&&errors.fields[index].required?errors.fields[index]['required']:'')">
        <el-checkbox
          v-model="item.required"
          :disabled="!('is_submited' in item) || item.is_submited"
        >必填</el-checkbox>
      </el-form-item>
      <el-form-item :error="String(errors.fields&&errors.fields[index].is_multi?errors.fields[index]['is_multi']:'')">
        <el-checkbox
          v-model="item.is_multi"
          :disabled="!('is_submited' in item) || item.is_submited"
        >多值</el-checkbox>
      </el-form-item>
      <el-form-item :error="String(errors.fields&&errors.fields[index].readme?errors.fields[index]['readme']:'')">
        <el-input
          v-model="item.readme"
          placeholder="描述"
          style="width: 150px"
          :disabled="!('is_submited' in item) || item.is_submited"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          size="mini"
          type="primary"
          style="margin: 0px 1px"
          v-show="'is_submited'in item && !item.is_submited"
          @click="on_field_submit(item, index)">
            确定
        </el-button>
        <el-button
          size="mini"
          type="main"
          style="margin: 0px 1px"
          v-show="'is_submited'in item && !item.is_submited"
          @click="on_field_cancel(item, index)">
            取消
        </el-button>
        <el-button
          size="mini"
          type="danger"
          style="margin: 0px 1px"
          v-show="!('is_submited' in item) || item.is_submited"
          @click="on_field_delete(item, index)">
            删除
        </el-button>
      </el-form-item>
    </el-form>
    <el-form label-width="60px" style="margin-right: 30px">
      <el-form-item>
        <el-button size="small" style="width: 100%" type="primary" :loading="loading" @click="on_add_field()">添加字段</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import master from "@/api";
import { master_s } from "@/api";

export default {
  name: "change-table",
  data() {
    return {
      is_visible: true,
      loading: false,
      form_data: JSON.parse(JSON.stringify(this.data)),
      errors: {}
    };
  },
  props: ["is_create", "data"],
  methods: {
    on_field_submit(item, index) {
      // api创建字段
      item.table = this.form_data.name;
      this.loading = true;
      master_s
        .post("mgmt/field/", item)
        .then(response => {
          this.loading = false;
          this.$message.success("添加字段成功");
          item.is_submited = true;
          item.id = response.data.id;
          this.$emit('add_field', item)
          this.errors = {};
        })
        .catch(error => {
          this.loading = false;
          this.errors = error.response.data;
        });
    },
    on_field_cancel(item, index) {
      this.form_data.fields.splice(index, 1);
    },
    on_field_delete(item, index) {
      this.loading = true;
      master_s
        .delete("mgmt/field/" + item.id + '/')
        .then(response => {
          this.loading = false;
          this.$message.success("删除字段成功");
          this.errors = {};
          this.form_data.fields.splice(index, 1);
          this.$emit('del_field', index)
        })
        .catch(error => {
          this.loading = false;
          this.errors = error.response.data;
        });
    },
    on_close() {
      this.$el.parentNode.removeChild(this.$el);
      this.$destroy();
    },
    on_add_field() {
      var fields = this.form_data.fields
      fields.splice(fields.length, 0, {
        name: "",
        alias: "",
        readme: "",
        type: 0,
        is_multi: false,
        required: false,
        is_submited: false,
      });
    },
  }
};
</script>

<style scoped>
</style>
